<template>
  <div class="special-word c-shadow">
    <jTabNav :items="tabList"></jTabNav>
    <h4 class="detail-base-title sentiment" ref="specialWord1">
      负面舆情
      <!-- 舆情关键词命中 -->
      <span>{{total1 || 0}}</span></h4>
    <div class="risk-sentiment">
      <div v-show="publicData && publicData.length" id="specialWord" class="special-word-chart1"></div>
      <j-no-data :mode="'b'" msg="b" v-if="publicData.length === 0"></j-no-data>
      <table v-else>
        <thead>
          <tr>
            <th v-for="title in negative" :key="title">{{title}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(list,index) in publicData" :key="index">
            <td>{{list.publishTm | dateFormat}}</td>
            <td class="over-hide" :title="list.title"><a :href="list.textLink" target="_blank">{{list.title || '--'}}</a></td>
             <!-- v-if="list.webSrc !== '微信公众号'" -->
            <!-- <td class="over-hide" :title="list.titlemsg" v-else>
              <span>
                {{list.title || '--'}}
              </span></td> -->
            <td>{{list.webSrc || '--'}}</td>
            <td :title="list.keywords">{{list.keywords || '--'}}</td>
            <td>{{list.inputTm | dateFormat}}</td>
          </tr>
        </tbody>
      </table>
      <div class="clearFix paging-wrap">
        <el-pagination v-if="total1>10" class="fr" @size-change="handleSizeChange" @current-change="paging" :current-page.sync="listParams.pageNum1" :page-size="listParams.pageSize1" layout="prev, pager, next, jumper" :total.sync="total1">
        </el-pagination>
      </div>
    </div>
    <!-- 柱状图 -->
    <h4 class="detail-base-title" ref="specialWord2">ICP特征词命中<span>{{total || 0}}</span></h4>
    <div class="risk-sentiment1">
      <div v-show="!noData && total" id="specialWordChart" class="special-word-chart"></div>
      <table v-if="total">
        <thead>
          <tr>
            <th v-for="title in tHeader" :key="title">{{title}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in data" :key="index">
            <td>{{item.inputTm | dateFormat}}</td>
            <td>{{item.keywords || '--'}}</td>
            <td :title="item.url"><a :href="item.url" target="_blank">{{item.url || '--'}}</a></td>
            <td>
              <router-link :to="{name:'snapshot',query:{entname:entname,picName:item.pictureName,keywords:item.keywords}}">查看</router-link>
            </td>
            <!-- <td>{{item.source}}</td> -->
          </tr>
        </tbody>
      </table>
      <j-no-data :mode="'b'" msg="b" v-if="!total"></j-no-data>
      <div class="clearFix paging-wrap">
        <el-pagination class="fr" @size-change="handleSizeChange2" @current-change="handleCurrentChange" :current-page.sync="pageNum" :page-size="pageSize" layout="prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    entdetail as api
  } from '../../api'
  import {
    Code
  } from '../../assets/js/operaCode.js'
  import {
    jNoData,
    jTabNav
  } from '../../components'
  import { barChart } from '../../assets/js/chart/barChart'
  // import _ from '../../../static/js/underscore.js'
  // import transfer from '../../store/temporaryTransfer.js'
  export default {
    data() {
      return {
        tabList: [],
        fmyq: 0,
        tscmz: 0,
        yqcb: 0,
        entname: '',
        totalCount: '',
        totalCount2: '',
        sentimentTotal: 0,
        opinion: ['舆情名称', '传播量'],
        sentimentParams: {},
        opinionData: [],
        negative: ['舆情时间', '舆情标题', '来源', '关键词', '预警时间'],
        entName: this.$route.query.entname,
        publicData: [],
        // 分页的当前页数
        listParams: {
          pageNum1: 1,
          pageSize1: 10
        },
        total1: 0,
        tHeader: ['预警时间', '关键词', '网址', '快照'],
        data: [],
        pageNum: 1,
        pageSize: 10,
        total: 0,
        noData: false
      }
    },
    methods: {
      // 获取负面舆情数据
      getPublicList() {
        let _this = this
        _this.noData = false
        let params = {
          entName: _this.entName,
          pageNum: _this.listParams.pageNum1,
          pageSize: _this.listParams.pageSize1
        }
        api
          .getSuperviseEnt(params)
          .then(rtn => {
            if (!_this.fmyq) {
              _this.tabList.push({
                idx: 1,
                name: '负面舆情',
                num: rtn.data.total || 0,
                offsetTop: _this.$refs['specialWord1'] ? _this.$refs['specialWord1'].offsetTop : 0
              })
            }
            _this.fmyq++
            if (!rtn.data) return false
            _this.publicData = rtn.data.list
            rtn.data.list.map(list => {
              if (list.webSrc === '微信公众号') {
                list.titlemsg = '网址已过期，请去官网搜索' + list.title
              }
            })
            _this.total1 = rtn.data.total
            // es6去重
            // let uniq_user = _.uniq(rtn.data.list,false,function(item) {
            //   return item.keyWord || item.title || item.webSrc
            // })
          })
          .catch(err => {
            _this.pageState = err
            if (!_this.fmyq) {
              _this.tabList.push({
                idx: 1,
                name: '负面舆情',
                num: 0,
                offsetTop: _this.$refs['specialWord1'] ? _this.$refs['specialWord1'].offsetTop : 0
              })
            }
            _this.fmyq++
          })
      },
      // 获取关键词数据
      getAntistopList() {
        this.noData = false
        let params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          entName: this.$route.query.entname
        }
        api
          .getAntistopList(params)
          .then(rtn => {
            if (!this.tscmz) {
              this.tabList.push({
                idx: 3,
                name: 'ICP特殊词命中',
                num: rtn.data.total || 0,
                offsetTop: this.$refs['specialWord2'] ? this.$refs['specialWord2'].offsetTop : 0
              })
            }
            this.tscmz++
            if (!rtn.data) return false
            // console.log(rtn.data.list)
            this.data = rtn.data.list
            this.total = rtn.data.total
            this.pageState.code = this.data.length ? Code.Success : Code.NoData
          })
          .catch(err => {
            this.pageState = err
            if (!this.tscmz) {
              this.tabList.push({
                idx: 3,
                name: 'ICP特殊词命中',
                num: 0,
                offsetTop: this.$refs['specialWord2'] ? this.$refs['specialWord2'].offsetTop : 0
              })
            }
            this.tscmz++
          })
      },
      handleSizeChange() {
        // 当pagesize改变的时候出发该函数
      },
      handleSizeChange2() {
        // 当pagesize改变的时候出发该函数
      },
      paging(index) {
        this.listParams.pageNum1 = index
        this.getPublicList()
      },
      handleCurrentChange(index) {
        // 当切换页码的时候出发的函数
        this.pageNum = index
        this.getAntistopList()
      },
      handleCurrentChange2(index) {
        this.sentimentParams.pageNum = index
        this.getOpinionList()
      },
      // 获取柱状图数据
      getList() {
        this.noData = false
        let params = {
          entName: this.$route.query.entname
        }
        // let _this = this
        api.getkeywordHitInfo(params).then(rtn => {
          // console.log(rtn.data)
          this.totalCount = rtn.data.totalCount
          // eslint-disable-next-line
          // transfer.$emit('riskNum', 'specialWord:' + _this.totalCount)
          let data = {
            name: Object.keys(rtn.data.keywordCount),
            value: Object.values(rtn.data.keywordCount)
          }
          // console.log(data)
          if (rtn.data.totalCount === 0) {
            this.noData = true
          } else {
            this.noData = false
            let width1 = document.querySelector(".risk-sentiment1").offsetWidth
            barChart.drawWord('specialWordChart', data, width1)
            // this.initChart(data, 'specialWordChart')
          }
        })
      },
      getList1() {
        let params = {
          entName: this.entname
        }
        api.getkeywordHitOpinionInfo(params).then(rtn => {
          // console.log(rtn)
          this.totalCount2 = rtn.data.totalCount
          let data2 = {
            name: Object.keys(rtn.data.keywordCount),
            value: Object.values(rtn.data.keywordCount)
          }
          if (rtn.data.totalCount !== 0) {
            let width = document.querySelector(".risk-sentiment").offsetWidth
            barChart.drawWord('specialWord', data2, width)
          }
        })
      },
      initChart(data, id) {
        let chartDom = document.getElementById(id)
        // eslint-disable-next-line
        let chart = window.echarts.init(chartDom)
        let option = {
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '7%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: data.name,
            axisTick: {
              show: false,
              alignWithLabel: true,
              color: '#ccc'
            },
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            },
            axisLabel: {
              color: '#808080',
              rotate: 45
            }
          }],
          yAxis: [{
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#808080'
            }
          }],
          series: [{
            name: '',
            type: 'bar',
            barWidth: '10%',
            itemStyle: {
              normal: {
                // eslint-disable-next-line
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#20aeff'
                },
                {
                  offset: 1,
                  color: '#17a1ef'
                }
                ])
              }
            },
            data: data.value
          }]
        }
        chart.setOption(option)
      }
    },
    mounted() {
      this.entname = this.$route.query.entname
      this.getPublicList()
      this.getAntistopList()
      setTimeout(() => {
        this.getList1()
      }, 10)
      this.getList()
    },
    components: {
      jNoData,
      jTabNav
    }
  }
</script>

<style lang="scss" scoped>
.special-word {
  padding: 25px 40px 40px;
  .detail-title {
    margin-bottom: 0px;
  }
  .detail-base-title {
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
    padding: 30px 0 10px 12px;
    margin-bottom: 15px;
    position: relative;
    background-image: linear-gradient(0deg, #1891ef, #1891ef);
    background-size: 3px 16px;
    background-position: 0 37px;
    background-repeat: no-repeat;
    border-bottom: 1px solid #eee;
  }
  h4.detail-base-title span {
    border: 1px solid #9dc5fd;
    border-radius: 10px;
    color: #1688f3;
    background: #f2f7ff;
    font-size: 12px;
    padding: 0 10px;
    margin-left: 15px;
    vertical-align: top;
  }
  .merge {
    margin-bottom: 20px;
  }
  table {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
    td,
    th {
      border: 1px solid #e2e2e2;
    }
    th {
      line-height: 38px;
      color: #999;
      background: #f2f1f1;
    }
    td {
      line-height: 40px;
      padding: 0 10px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .special-word-chart {
    height: 350px;
    margin-bottom: 30px;
  }
  .special-word-chart1 {
    height: 350px;
    margin-bottom: 30px;
    width: 100%;
  }
}
</style>



// WEBPACK FOOTER //
// src/view/entDetail/specialWord.vue